<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <span style="color: red; margin-right: 5px" v-if="required">*</span>
      <div>{{ name }}</div>
    </div>
    <el-form :label-width="labelWidth" :disabled="disabled" label-position="left" class="sub-form">
      <el-form-item :label="caseName">
        <div style="display: flex">
          <el-select style="flex: 1" v-model="data.caseId" filterable remote reserve-keyword
            placeholder="请输入（被保险人/处理机构/委托日期等）关键词搜索" :remote-method="getCases" :loading="loading" @input="chooseCase">
            <el-option v-for="item in cases" :key="item.CS_ID" :label="item.CS_DisplayName"
              :value="item.CS_ID"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item :label="logName">
        <div style="display: flex">
          <el-select style="flex: 1" v-model="data.logId" filterable placeholder="请选择日志" :loading="loading"
            @input="chooseLog">
            <el-option v-for="item in logs" :key="item.CLG_ID" :label="item.CLG_DisplayName"
              :value="item.CLG_ID"></el-option>
          </el-select>
          <el-button v-if="curLog" size="small" icon="el-icon-more" @click="detailVis = !detailVis"></el-button>
        </div>
      </el-form-item>
      <el-form-item v-if="detailVis">
        {{ curLog }}
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getCases, getCaseLogs } from '@/api/flowCenter/field/caseLogSelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        caseId: null,
        logId: null,
        displayName: '',
      },
      curCase: null,
      curLog: null,
      cases: [],
      logs: [],
      loading: false,
      detailVis: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '日志选择器'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '日志选择器'
        }
      }
      return '日志选择器'
    },
    caseName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'caseName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '案件'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '案件'
        }
      }
      return '案件'
    },
    logName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'logName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '日志'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '日志'
        }
      }
      return '日志'
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
  },
  methods: {
    getCases(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCases({ keyword }).then(({ data }) => {
          this.cases = data
          this.loading = false
        })
      }
    },
    chooseCase(val) {
      this.loading = true
      this.data.caseId = val
      this.curCase = this.cases.find((x) => x.CS_ID == val)
      this.data.displayName = this.curCase.CS_DisplayName
      getCaseLogs({ caseId: this.data.caseId }).then(({ data }) => {
        this.logs = data
        this.loading = false
      })
    },
    chooseLog(val) {
      this.data.logId = val
      this.curLog = this.logs.find((x) => x.CLG_ID == val)
      this.input()
    },
    input() {
      let logName = this.curLog ? this.curLog.CLG_DisplayName : ''
      this.data.displayName = `【${this.curCase.CS_No}】${logName}`
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
      if (this.data.caseId && this.data.logId) {
        getCases({ id: this.data.caseId }).then(({ data }) => {
          this.cases = data
        })
        getCaseLogs({ caseId: this.data.caseId }).then(({ data }) => {
          this.logs = data
          this.curLog = this.logs[0]
        })
      }
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>